<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 74 72"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#06F" d="M27.587 30.383H12.32c-1.158 0-2.069.926-2.069 2.104s.91 2.104 2.07 2.104h15.225c1.159 0 2.069-.926 2.069-2.104a2.032 2.032 0 0 0-2.028-2.104Zm0 13.466H12.32c-1.158 0-2.069.925-2.069 2.104 0 1.178.91 2.104 2.07 2.104h15.225c1.159 0 2.069-.926 2.069-2.104 0-1.179-.91-2.104-2.028-2.104Z"/><path fill="#fff" d="M66.066 19.862h-9.682v-1.178c0-4.292-3.434-7.743-7.613-7.743h-9.02c-.165-2.862-1.323-5.513-3.35-7.532C34.248 1.22 31.352 0 28.331 0c-6.082 0-11.088 4.84-11.42 10.941H7.894c-4.22 0-7.613 3.493-7.613 7.743v45.573C.28 68.55 3.714 72 7.893 72h58.214c4.22 0 7.613-3.493 7.613-7.743v-36.61c0-4.292-3.434-7.785-7.654-7.785ZM28.332 4.208a7.01 7.01 0 0 1 5.13 2.188 7.474 7.474 0 0 1 2.11 4.545h-14.48c.33-3.745 3.434-6.733 7.24-6.733ZM7.893 67.792c-1.903 0-3.475-1.6-3.475-3.535V18.726c0-1.936 1.572-3.535 3.475-3.535h40.878c1.904 0 3.476 1.6 3.476 3.535v1.178H41.489c-.744 0-1.448.126-2.151.295-1.159.336-2.193.968-3.103 1.81A8.135 8.135 0 0 0 34 26.047a6.645 6.645 0 0 0-.166 1.557v36.652c0 .253 0 .463.041.715v.127c.042.21.042.463.083.673 0 .042 0 .084.042.126.041.21.082.463.165.674v.042c.083.21.124.42.207.63 0 .043.041.085.041.085.083.168.124.337.207.463H7.893Zm61.648-3.535c0 1.936-1.572 3.535-3.475 3.535H41.448c-1.903 0-3.475-1.6-3.475-3.535v-36.61a3.53 3.53 0 0 1 1.075-2.567 3.418 3.418 0 0 1 2.4-.968h24.618c1.903 0 3.475 1.6 3.475 3.535v36.61Z"/><path fill="#06F" d="M64.287 35.726 52.826 47.382l-6.04-6.144c-.828-.841-2.11-.841-2.938 0a2.108 2.108 0 0 0 0 2.988l7.53 7.659c.414.42.952.63 1.49.63.537 0 1.075-.21 1.489-.63l12.909-13.13a2.108 2.108 0 0 0 0-2.987c-.87-.884-2.152-.884-2.98-.042Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconComlianceReadygetstarted extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
